<template lang="pug">
  el-drawer.commonDrawer(
    title="新增收费方案"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="640px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        :fields="basicField"
        :showBtns="false"
        :layoutCol="{ xs: 24, md: 24, lg: 24 }"
      )
        el-button(slot="form-product" type="primary" icon="el-icon-circle-plus" round @click="addEdit") 添加产品
      div.table-empty
        s-table(
          ref="productTable"
          :column="productColumn2"
          v-if="productRecords.length > 0"
          :dataPops="productRecords"
        )
          template(slot="action" slot-scope="text, scope")
            el-link(@click="deleteProductHandle(scope.id)" type="primary") 删除
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 确定
    product-table(ref="productTableRef" @getProductData="productSureHandle" :value="value")

</template>
<script>
import { addProductSolution, getProductSolution } from '../../api'
import productTable from '../../../../../operate/saleCRM/tabs/product/productTable'
const productColumn2 = [
  {
    label: '产品名称',
    prop: 'productName'
  },
  {
    label: '标准单价',
    prop: 'standardAmount',
    width: '146'
  },
  {
    label: '销售单位',
    prop: 'unit'
  },
  {
    label: '操作',
    prop: 'action'
  }
]
export default {
  components: {
    productTable
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      default: 'add',
      type: String
    }
  },
  data () {
    return {
      submitting: false,
      info: {},
      products: [], // 产品列表
      productColumn2, // 已选择产品弹窗产品表格列
      productRecords: [], // 意向产品,
      value: []
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    basicField () {
      const { info } = this
      return [
        {
          label: '方案名称',
          key: 'name',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info?.name
        },
        {
          label: '备注',
          key: 'remark',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info?.remark
        },
        {
          label: '收费项目',
          key: 'product',
          type: 'slot'
        }
      ]
    }
  },
  watch: {
    visible: {
      handler (val) {
        console.log(`visible:${val}`)
        if (val) {
          this.getInfo(this.id)
        }
      }
    }
  },
  created () {
  },
  methods: {
    // 获取详情
    getInfo (id) {
      if (id) {
        this.loading = true
        getProductSolution({ id }).then(res => {
          console.log(res)
          this.info = res
          this.productRecords = res.products
        })
      } else {
        this.info = null
        this.productRecords = []
      }
    },
    // 提交
    async submitHandle () {
      const { productRecords, id } = this
      if (!productRecords?.length) {
        this.$message.error('请选择至少一项产品')
        return
      }
      console.log(productRecords)

      const values = await this.$refs.form.submitForm()

      let fullAmount = 0

      for (const index in productRecords) {
        const item = productRecords[index]
        fullAmount += item.standardAmount
      }
      console.log(fullAmount)
      addProductSolution({
        ...values,
        fullAmount,
        products: productRecords.map(x => {
          delete x.id
          delete x.created
          return x
        }),
        enabled: true,
        id: id || null
      }).then(() => {
        this.$message.success('提交成功')
        this.$emit('getList')
        this.$_handleCancel()
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    },
    productFormChange (val, id, key) {
      const { productRecords } = this
      this.productRecords = productRecords.map(x => {
        if (x.id === id) {
          x[key] = val
        }
        return x
      })
    },
    // 删除选中意向产品
    deleteProductHandle (id) {
      const { productRecords } = this
      this.productRecords = productRecords.filter(x => x.id !== id)
    },
    // 选择产品
    productSureHandle (data) {
      this.productRecords = data.map(x => {
        x.productName = x.name
        x.productId = x.id
        return x
      })
      this.productVisible = false
    },
    addEdit () {
      this.value = [...this.productRecords]
      this.$refs.productTableRef.mainFun()
    }
  }
}
</script>
